<template>
  <div class="photodetail">
    <h1 class="title">{{ imageinfo.title }}</h1>
    <p class="info">
      <span>发表时间：{{ imageinfo.add_time | dateFormat }}</span>
      <span>点击{{ imageinfo.click }}次</span>
    </p>
    <hr />
    <div class="photo-list">
        <vue-preview :slides="photolist" @close="handleClose"></vue-preview>
    </div>
    
    <div v-html="imageinfo.content" class="content" />
    <comment></comment>
  </div>
</template>

<script>
import comment from '../subComponent/Comment.vue'
export default {
  data() {
    return {
      imageinfo: {},
      photolist : [
          {
            src: 'https://f11.baidu.com/it/u=1401756631,1275929471&fm=173&app=49&f=JPEG?w=640&h=625&s=F503FE1F4E315E8E6030A9EF03004023&access=215967316',
            msrc: 'https://f11.baidu.com/it/u=1401756631,1275929471&fm=173&app=49&f=JPEG?w=640&h=625&s=F503FE1F4E315E8E6030A9EF03004023&access=215967316',
            w: 600,
            h: 400
          },
          {
            src: 'https://f10.baidu.com/it/u=449207283,4006164464&fm=173&app=49&f=JPEG?w=640&h=536&s=6FB20DC443231B056C11E09E03007093&access=215967316',
            msrc: 'https://f10.baidu.com/it/u=449207283,4006164464&fm=173&app=49&f=JPEG?w=640&h=536&s=6FB20DC443231B056C11E09E03007093&access=215967316',
            w: 600,
            h: 400
          },
		  {
            src: 'https://f11.baidu.com/it/u=884501245,728359678&fm=173&app=49&f=JPEG?w=640&h=553&s=03A248A64E414CDE9A84BEFB03001015&access=215967316',
            msrc: 'https://f11.baidu.com/it/u=884501245,728359678&fm=173&app=49&f=JPEG?w=640&h=553&s=03A248A64E414CDE9A84BEFB03001015&access=215967316',
            w: 600,
            h: 400
          },
		  {
            src: 'https://f11.baidu.com/it/u=1319802892,1189972148&fm=173&app=49&f=JPEG?w=640&h=507&s=69D009C7CC141CDC9A80ADB703004085&access=215967316',
            msrc: 'https://f11.baidu.com/it/u=1319802892,1189972148&fm=173&app=49&f=JPEG?w=640&h=507&s=69D009C7CC141CDC9A80ADB703004085&access=215967316',
            w: 600,
            h: 400
          },
		  {
            src: 'https://f12.baidu.com/it/u=1543832969,1052867359&fm=173&app=49&f=JPEG?w=640&h=556&s=AFB357875E5256D49F3164B303004011&access=215967316',
            msrc: 'https://f12.baidu.com/it/u=1543832969,1052867359&fm=173&app=49&f=JPEG?w=640&h=556&s=AFB357875E5256D49F3164B303004011&access=215967316',
            w: 600,
            h: 400
          }
        ]
    };
  },
  created() {
    this.getimageinfo();
  },
  methods: {
    async getimageinfo() {
      const { data } = await this.$http.get("api/getimageInfo/" + this.id);
      if (data.status == 0) this.imageinfo = data.message[0];
    },
    handleClose(){
        console.log('close event')
    }
  },
  props: ["id"],
  components :{
      comment
  }
};
</script>

<style lang="scss" scoped>
.photodetail {
    margin-top: 10px;
  .title {
    font-size: 14px;
    color: #53a9ff;
    text-align: center;
  }
  .info {
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    margin: 10px;
    color: #808080;
  }
  .content {
      line-height: 30px;
      font-size: 14px;
      text-indent: 2em;
  }




}
  .photo-list{
     /deep/ .my-gallery{
         display: flex;
         flex-wrap: wrap;
          figure{
              width:30%;
              margin:5px;
              img{
                width:100%
              }
          }
      }
  }
</style>